<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>无协作业提交系统</title>
        <link rel="stylesheet" href="https://scnuradio-association.cn/WuXie_2/bootstrap-4.3.1-dist/css/bootstrap.css"/>
    </head>
    <body>
        <div class="container header">
            <h1>无协作业提交系统(Beta v1.2)</h1>
        </div>
        <div class="container">
            <p><b>说明：</b><br/>
                提交作业时，请填写好相关信息。多个文件请打包压缩上传。<br/>
                文件名不做要求，系统会根据所填信息自动重命名文件。</p>
            <p><b>注意：提交文件不能大于64MB</b></p>
            <br/>

            <form id="form">
                <label for="departmenttag">部门：</label>
                <select id="departmenttag" name="departmenttag">
                    <option value="">请选择一项...</option>
                    <option name="秘书处" value="秘书处">秘书处</option>
                    <option name="技术部" value="技术部">技术部</option>
                    <option name="宣策部" value="宣策部">宣策部</option>
                    <option name="维修部" value="维修部">维修部</option>
                    <option name="培训部" value="培训部">培训部</option>
                    <option name="外联部" value="外联部">外联部</option>
                </select>
                <br />
            
                <label for="nametag">姓名：</label>
                <input type="text" name="nametag" id="nametag" value="" />
                <br />
            
                <label for="commenttag">作业：</label>
                <select id="commenttag" name="commenttag">
                    <option value="">请选择一项...</option>
                    <option name="算法作业1" value="算法作业1">算法作业1</option>
                    <option name="算法作业2" value="算法作业2">算法作业2</option>
                    <!--
                            <option value="技术部">技术部</option>
                            <option value="宣策部">宣策部</option>
                            <option value="维修部">维修部</option>
                            <option value="培训部">培训部</option>
                            <option value="外联部">外联部</option>
                            -->
                </select>
                <br />
            
                <span id="inputCover">选择文件</span>
                <input type="file" name="file" id="file" />
                <br />
            
                <input type="submit" name="submit" id="submit" value="提交" />
            </form>

            <button type="button" id="upagain">继续上传</button>
	        <span id="processBar"></span>
	        <span id="processNum">未选择文件</span>

            
        </div>
    </body>
    <script src="https://scnuradio-association.cn/WuXie_2/jquery-3.4.0/jquery-3.4.0.min.js"></script>
    <script>
        $(document).ready(function () {
            var inputCover = $("#inputCover");
            var processNum = $("#processNum");
            var processBar = $("#processBar");
            //上传准备信息
            $("#file").change(function () {
                var file = document.getElementById('file');
                var fileName = file.files[0].name;
                var fileSize = file.files[0].size;
                processBar.css("width", 0);
                //验证要上传的文件
                if (fileSize > 64000000) {
                    inputCover.html("<font>文件过大，请重新选择</font>");
                    processNum.html('未选择文件');
                    document.getElementById('file').value = '';
                    return false;
                } else {
                    inputCover.html(fileName + ' / ' + parseInt(fileSize / 1024) + 'K');
                    processNum.html('等待上传');
                }
            })

            //提交验证
            $("#submit").click(function () {
                if ($("#file").val() == '') {
                    alert('请先选择文件！');
                } else {
                    upload();
                }
            })

            //创建ajax对象，发送上传请求
            function upload() {
                var file = document.getElementById('file').files[0];
                var form = new FormData();
                form.append('myfile', file);
                $.ajax({
                    url: 'https://scnuradio-association.cn/WuXie_2/HomeworkSubmit/upload-desktop.phpupload.php',
                    async: true,//异步
                    type: 'post',//post方式
                    data: form,//FormData数据
                    processData: false,//不处理数据流 !important
                    contentType: false,//不设置http头 !important
                    xhr: function () {//获取上传进度            
                        myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) {
                            myXhr.upload.addEventListener('progress', function (e) {//监听progress事件
                                var loaded = e.loaded;//已上传
                                var total = e.total;//总大小
                                var percent = Math.floor(100 * loaded / total);//百分比
                                processNum.text(percent + "%");//数显进度
                                processBar.css("width", percent + "px");//图显进度
                            }, false);
                        }
                        return myXhr;
                        },
                        success: function(data) {//上传成功回调
                            //console.log("文档当前位置是：" + data);//获取文件链接
                            //document.cookie = "url=" + data;//此行可忽略
                            $("#submit").text('上传成功');
                            $("#upagain").css("display", "block");
                        }
                    })
            }

            //继续上传
            $("upagain").click(function () {
                $("#file").click();
                processNum.html('未选择文件');
                processBar.css("width", 0);
                $("#submit").text('上传');
                document.getElementById('file').value = '';
                $(this).css("display", "none");
            })
        })
        //https://blog.csdn.net/qq_34518793/article/details/79849213
    </script>
</html>